<template>
  <div class="container">
    <div class="avatar">
      <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="1"/>
      <p class="des">点击上传头像</p>
    </div>
    <div class="fields info">
      <template v-for="(item, index) in fields">
        <van-field v-if="item.type === 'input'" v-model="form[item.key]" :label="item.label" :key="index" label-width="100px" placeholder="请输入"/>
        <van-field
          v-if="item.type === 'date'"
          v-model="form[item.key]"
          :label="item.label"
          disabled
          @click="showDate = true"
          placeholder="请选择"
          :key="index"/>
        <van-cell
          v-if="item.type === 'address'"
          title="所在城市"
          is-link
          :value="form[item.key] ? form[item.key] : '请选择'"
          :value-class="form[item.key] ? 'cell-value' : ''"
          :key="index"
          @click="showAddress = true"/>
        <van-divider :key="index"/>
      </template>
    </div>
    <div class="btn">
      <van-button type="info" size="large" @click="toSubmit">确认</van-button>
    </div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        @cancel="dateCancel"
        @confirm="dateConfirm"
        :min-date="minDate"/>
    </van-popup>

    <!-- 所在地区 -->
    <van-popup
      v-model="showAddress"
      position="bottom">
      <van-area
        :area-list="areaList"
        title="选择所在城市"
        @cancel="showAddress = false"
        @confirm="onSelectAddress"/>
    </van-popup>
  </div>
</template>

<script>
import {birthdayHandle} from '../utils'
import area from '@/assets/js/area'
export default {
  name: 'imp-info',
  data () {
    return {
      form: {},
      fileList: [],
      showDate: false,
      birthday: '',
      minDate: new Date('1900-01-01'),
      showAddress: false,
      areaList: area
    }
  },
  methods: {
    afterRead (file) {
      this.form.head_sculpture = file.file
    },
    dateCancel () {
      this.showDate = false
    },
    dateConfirm (value) {
      this.form.birthday = birthdayHandle(value)
      this.showDate = false
    },
    onSelectAddress (arr) {
      let code = []
      let city = []
      arr.forEach(item => {
        code.push(item.code)
        city.push(item.name)
      })
      this.form.location = city.join(' ')
      this.form.china_id = code[2]
      this.showAddress = false
    },

    toSubmit () {
      for (let i = 0; i < this.fields.length; i++) {
        let item = this.fields[i]
        if (!this.form[item.key]) {
          this.$toast(`${item.label}不能为空`)
          return
        }
      }
      this.$emit('toSubmit', this.form)
    }
    // showDate () {}
  },
  props: ['fields'],
  created () {
    this.fields.forEach(item => {
      this.form[item.key] = ''
    })
    let user = localStorage.getItem('userInfo')
    if (user) {
      this.fileList = [{url: JSON.parse(user).headimgurl, isImage: true}]
    }
  }
}
</script>

<style scoped>
  .container{
    padding: 0 15px;
  }
  .avatar{
    padding: 50px 0;
    text-align: center;
  }
  .avatar .des{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:22px;
    color:rgba(153,153,153,1);
  }
  .van-cell{
    padding-left: 0;
    margin-top: 16px;
  }
  .btn{
    margin-top: 70px;
  }
  .van-divider{
    margin: 0;
  }
  .van-cell:not(:last-child)::after{
    display: none;
  }
</style>
